import React, { useEffect, useState } from 'react';
import { connect, Dispatch } from 'umi';

import { Modal, message, Transfer } from 'antd';

import {
  WidgetsItem,
  dashboardGroupsItem,
  dashboardWidgetsItem,
  IDashboardItem,
} from '@/pages/SelfQuery/type';
import { ConnectState, IResponse } from '@/models/connect';

interface AddIndexModelProps {
  visible: boolean;
  onCancel: () => void;
  widgets: Array<WidgetsItem>;
  dashboard: IDashboardItem;
  dispatch: Dispatch;
  operationGroup: dashboardGroupsItem;
  groups: Array<dashboardGroupsItem>;
}

const AddModel: React.FC<AddIndexModelProps> = (props) => {
  const { visible, onCancel,  widgets, dispatch, operationGroup, dashboard, groups } = props;
  const [selectWidgets, setSelectWidgets] = useState<Array<string>>([]); // 选择的指标

  // 选择指标
  const handleChange = (value: Array<string>) => {
    setSelectWidgets(value);
  };

  // 存储添加的指标
  const establish = () => {
    if (selectWidgets.length === 0) {
      message.warning('请选择需要添加的指标');
      return;
    }

    let widgets: Array<any> = [];
    operationGroup.WidgetsArr.map((item) => {
      widgets.push(item.widgetId);
    });
    widgets = widgets.concat(selectWidgets);
    dispatch({
      type: 'board/updateGroup',
      payload: { id: operationGroup.id, widgets },
      callback: (res: IResponse) => {
        const { header } = res;
        if (header.code === 200) {
          message.success('添加指标成功');
          // 重新赋值看板详情数据
          const newDashboard: IDashboardItem = JSON.parse(JSON.stringify(dashboard));
          newDashboard.groups.map((v) => {
            if (v.id === operationGroup.id) {
              v.widgets = widgets.toString();
            }
            return v;
          });

          dispatch({
            type: 'panel/sevaDashboard',
            payload: newDashboard,
          });

          onCancel();
        } else {
          message.warning('添加指标失败');
        }
      },
    });
  };

  // 获取所有的指标列表
  useEffect(() => {
    if (widgets.length === 0) {
      dispatch({
        type: 'indexLibrary/fetchDashboards',
      });
    }
  }, []);

  // 下拉选择的指标 只展示未被分组的指标
  let widgetsOption: Array<dashboardWidgetsItem> = [];
  groups.map(item => {
    if(item.WidgetsArr.length > 0 && item.groupName === '未分组' && item.id === 0) {
      widgetsOption = item.WidgetsArr
    }
  })

  const transferData: Array<{ key: string; title: string }> = [];

  widgetsOption.map((v) => {
    transferData.push({
      key: v.widgetId.toString(),
      title: v.widgetName,
    });
  });

  return (
    <Modal
      title="添加分组指标"
      width={470}
      destroyOnClose
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <Transfer
        listStyle={{
          width: 188,
          height: 380,
        }}
        dataSource={transferData}
        titles={['看板指标', '分组指标']}
        targetKeys={selectWidgets}
        onChange={handleChange}
        // @ts-ignore
        render={(item) => item.title}
      />
    </Modal>
  );
};

export default connect(({ indexLibrary, panel }: ConnectState) => ({
  widgets: indexLibrary.widgets,
  dashboard: panel.dashboard,
}))(AddModel);
